<html>
<head>
  <title>陌生人聊天</title>
  <meta charset="utf-8">
<style>
  div.row div#waitanimation { padding: 1px;position: fixed; top: 0 ;left: 2}
  form { padding: 10px; width:100%;position: fixed; bottom: 0;}
  #plusbutton { padding: 10px; position: fixed; right: 0; top: 0; }
  #messages { list-style-type: none; margin: 0; padding: 0; }
  #messages li { padding: 5px 10px; }
  #messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<div class="row">   
      <div id="waitanimation" class="col s12 l7 progress white">
        <div class="indeterminate black"></div>
      </div> 
      <div class="col s12 l5"></div>
</div>

<div class="row">
<div class="col l1 s12"></div>	
<div class="chat page col l12 s12">
<div id="messagesdiv"> <ul id="messages" class=""></ul> <div>

<form action="">
	<input id="m"  autocomplete="off" />
	<button class="btn black">发送</button>
	  <form action="#">
          </br>		     
		<label>
				          <input type="checkbox" id="pubchange"/>
					          <span>切换到公共聊天</span>
		</label>
         </form>
</form>


</div>

</div>
</br>
</br>
</br>
</br>
</br>
<a id="end" name="end" ></a> 

<div class="fixed-action-btn" id="plusbutton">
  <a class="btn-floating btn black">
    <i class="large material-icons">close</i>
  </a>
  <ul>
    <li><button class="btn-floating red tooltipped" id="changehuman" data-position="bottom" data-tooltip="换人"><i class="material-icons">youtube_searched_for</i></button></li>
    <li><a class="btn-floating yellow darken-1 tooltipped" id="quitrefresh" data-position="bottom" data-tooltip="关闭刷新"><i class="material-icons">power_settings_new</i></a></li>
  </ul>
</div>
<script>
function slt1()
{
    document.getElementById("end").scrollIntoView();
} 
document.addEventListener('DOMContentLoaded', function() {
    var floatelems = document.querySelectorAll('.fixed-action-btn');
    var floatinstances = M.FloatingActionButton.init(floatelems, {
      direction: 'left'
    });
    var tooltipelems = document.querySelectorAll('.tooltipped');
    var tooltipinstances = M.Tooltip.init(tooltipelems, {});
  });
</script>
<!-- Compiled and minified CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="clientmain.js"></script>
</body>
</html>
